<template>
	<view class="activity-account" :style="[{paddingTop:statusBar+ 'px'}]">
		<view class="status" :style="[{height:statusBar+ 'px'}]" ></view>
		<view class="navigation" :style="[{top:(statusBar-2)+ 'px'}]">
			<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
			<view class="navigation-title">金豆账户</view>
			<view class="tip-icon-box" @click="openTips()">
				<image src="/static/images/tip-icon.png" mode=""></image>
			</view>
		</view>
		<view class="navigation-position"></view>

		<view class="header">
			<view class="header-title">可用数量(个)</view>
			<view class="activity-account-balance">{{ user.gold_beans>0?user.gold_beans:'0' }}</view>
			<view class="activity-account-operation" @click="goActivityGoinsMoveAccount()" >
				<view class="activity-account-operation-btn" >转出</view>
			</view>
		</view>
		
		<view class="activity-account-list">
			<view class="activity-account-title">
				<view>账户明细</view>
				<view>
					<picker @change="bindPickerChange" :value="index" :range="arr">
						<view class="drop-down-box">
							<view class="">{{arr[index]}}</view>	
							<image src="/static/images/drop-down.png" class="drop-down" mode=""></image>
						</view>
					</picker>
				</view>
			</view>
			<view class="date-box">
				<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至"  ref="datetimePicker" />
			</view>
			
			<view class="totla-money" v-if="total_num>0&&type!=''">
				<text>合计：</text>
				<view class=""><text>＋</text> <text>{{ total_num }}</text></view>	
			</view>
			
			<view class="totla-money totla-money-out" v-if="total_num<0&&type!=''">
				<text>合计：</text>
				<text>{{ total_num }}</text>
			</view>	
			<view class="activity-account-item" v-for="(item,index) in pageItems" :key="index">
				<view>
					<view>{{ item.reason }}</view>
					<view>{{ item.created_at }}</view>
				</view>
				<view class="come-money" v-if="item.money>0"><text>＋</text>{{ item.money }}</view>
				<view class="out-money" v-else>{{ item.money }}</view>
			</view>
			<view class="no-more" v-if="pageHasNoMore&&pageItems.length!=0" >
			  --- 没有更多数据了 ---
			</view>
			<view class="nodata-box" v-if="pageHasNoMore&&pageItems.length==0">
				<image src="/static/images/nodata-icon.png" mode="" class="nodata-icon"></image>
				<view class="nodata-text">暂无数据</view>
			</view>
		</view>
		<uni-popup ref="tipsPopup" type="center" :mask-click="false">
			<view class="tips-content-modal">
				<view class="tips-content-title">金豆说明</view>
				<view class="tips-content">
					<view class="tips-item">① 金豆用于黄金风爆抢购寄售和兑换抢购金使用；</view>
					<view class="tips-item">② 金豆不能提现，可转给自己邀请的伙伴，转出数量20个起。</view>
				</view>
				<view class="confirm" @click="closePop()">我知道了</view>
			</view>
		</uni-popup>
		<image class="return-top" mode="aspectFit" v-if="isTopButtonShow" @click="returnTop" src="/static/images/return-top.png"></image>
	</view>
</template>

<script>
	/* function getRequestParams() {
			let url = location.href;
			let requestParams = {};
			if (url.indexOf('?') !== -1) {
				let str = url.substr(url.indexOf('?') + 1);
				let strs = str.split('&');
				for (let i = 0; i < strs.length; i++) {
					requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return requestParams;
	}
	let params = getRequestParams();
	let token = params['token'];
	let status_bar =  params['status_bar'];
	let source = 'wap'
	if(token!=undefined){
		uni.setStorage({
		    key: 'token',
		    data: token
		})
		source = 'app'
	}
	if(status_bar!=undefined){
		uni.setStorage({
		    key: 'status_bar',
		    data: status_bar
		})
	} */
	import store from "store"
	import {mapGetters,mapMutations,mapActions} from 'vuex'
	import Pagination from "mixins/Pagination"
	// import CurrentUser from "mixins/CurrentUser"
	import { getUser } from "api/userApi"
	import { goldBeansList } from "api/goldstormApi.js"
	export default {
		store,
		computed:{
			...mapGetters([
				'user',
				'statusBar',
				'isLogin'
			])
		},
		mixins:[
			Pagination,
			// CurrentUser
		],
		data:()=>({
			isTopButtonShow:false,
			source:source,
			activityList:[1,2,3,4,5,6],
			array: [
				{
					type:'',
					name:'全部',
				},
				{
					type:'reselling_fee',
					name:'寄售消耗金豆'
				},
				{
					type:'order_give',
					name:'平台赠送'
				},
				{
					type:'transfered_in',
					name:'转入'
				},
				{
					type:'transfered_out',
					name:'转出'
				},
				{
					type:'overtime_fine',
					name:'超时未付处罚'
				}
			],
			arr:[
				'全部','寄售消耗金豆','平台赠送','转入','转出','超时未付处罚'
			],
			index: 0,
			type:'',
			isActivityGoldCoins:true,
			datetimerange: [],
			start_time:'',
			end_time:'',
			total_num:null
		}),
		watch: {
			datetimerange(newval) {
				this.pageNumber = 1
				this.pageHasNoMore = false
				this.loadPageData()
			}
		},
		methods:{
			...mapMutations([
				'setUser',
				'setStatusBar'
				
			]),
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.type = this.array[this.index].type
				this.pageNumber = 1
				this.pageHasNoMore = false
				this.loadPageData()
			},
			back(){
				if(this.source == 'wap'){
					uni.navigateBack()
				}else{
					// window.flutter_inappwebview.callHandler('back_to_app', '')
					backToApp.postMessage('back');
				}
			},
			goActivityGoinsMoveAccount(){
				uni.navigateTo({
					url:'/packs/pages/activity/activityGoinsMoveAccount'
				})
			},
			async getUser(){
				let response =  await getUser()
				this.setUser(response)
			},
			async loadPageItems() {
				let condition = this.type;
				let start_time = this.datetimerange[0];
				let end_time = this.datetimerange[1];
				return await goldBeansList({page: this.pageNumber,condition:condition,start_time:start_time,end_time:end_time}) 
			},
			openTips(){
				this.$refs.tipsPopup.open('center')
			},
			closePop(){
				this.$refs.tipsPopup.close()
			},
			returnTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				})
			},
			async refresh(){
				if(this.datetimerange.length!=0){
					this.$refs.datetimePicker.clear()
				}else{
					this.pageNumber = 1
					this.pageHasNoMore = false
					this.pageMeta = {}
					this.pageItems = []
					await this.loadPageData()
				}
			}
		},
		async onShow(){
			if(status_bar!=undefined){
				this.setStatusBar(status_bar)
			}
			if(await this.isLogin ||  await this.statusBar>0){
				await this.getUser()
			}
			
		},
		async onLoad() {
			if(await this.isLogin ||  await this.statusBar>0){
				await this.loadPageData()
			}
			
		},
		onPageScroll(e) {
			if (e.scrollTop >= 42) {
				this.isTopButtonShow = true
			} else {
				this.isTopButtonShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F6F6;
	}
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:99;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.tip-icon-box{
		display: block;
		width:50rpx;
		height:50rpx;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		top:26rpx;
		right:40rpx;
		>image{
			display: block;
			width:40rpx;
			height:40rpx;
			
		}
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.header{
		margin: 20rpx auto 0;
		width: 590rpx;
		padding: 0 48rpx;
		height: 300rpx;
		background: url(/static/images/activity-account-header-coins-bg.png) no-repeat center;
		background-size: cover;
	}
	.header-title{
		padding:48rpx 0 8rpx 0rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.6;
	}
	.activity-account-balance{
		color:#ffffff;
		font-size: 64rpx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 74rpx;
		padding-bottom: 32rpx;
		border-bottom: 2rpx solid rgba(255,255,255,.1);
	}
	.activity-account-operation{
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
		>view{
			width: 140rpx;
			height: 75rpx;
			font-size: 28rpx;
			font-weight: 600;
			color:#FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.activity-account-list{
		margin-top: 44rpx;
		padding:0 32rpx;
		padding-bottom: 200rpx;
	}
	.activity-account-title{
		width: 686rpx;
		margin: 0 auto;
		padding-bottom:32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		>view:nth-child(1){
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 44rpx;
		}
		>view:nth-child(2){
			// min-width:196rpx;
			padding: 0 20rpx;
			height: 60rpx;
			background: #F0F0F0;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			>image{
				display: block;
				width: 24rpx;
				height: 24rpx;
				margin-left: 12rpx;
			}
		}
	}
	.totla-money{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-right: 15rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #FF9500;
		margin-bottom: 20rpx;
		>text:nth-child(1){
			font-size: 30rpx;
		}
		>view:nth-child(2){
			>text:nth-child(1){
				font-size:28rpx;
			}
		}
	}
	.totla-money-out{
		color: #333333;
	}
	.drop-down-box{
		display: flex;
		align-items: center;
	}
	.drop-down{
		display: block;
		width: 24rpx;
		height: 24rpx;
		margin-left: 12rpx;
	}
	.activity-account-item{
		width: 622rpx;
		margin: 0 auto;
		padding: 0 32rpx;
		height: 148rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		// align-items: center;
		justify-content:space-between;
		margin-bottom: 16rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 32rpx;
			>view:nth-child(2){
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-top: 16rpx;
			}
		}
		.come-money{
			font-size: 36rpx;
			// font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #FF9500;
			line-height: 40rpx;
			margin-top: 32rpx;
			>text{
				font-size: 28rpx;
			}
		}
		.out-money{
			font-size: 36rpx;
			// font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #333333;
			line-height: 40rpx;
			margin-top: 32rpx;
		}
	}
	.no-more{
		text-align: center;
		font-size: 26rpx;
		color:#999999;
		margin-top: 30rpx;
	}
	.nodata{
		width: 100%;
		height: 50rpx;
		position: absolute;
		left:0;
		top:0;
		right:0;
		bottom:0;
		margin:auto;
	}
	.nodata-box{
		width:686rpx;
		height: 390rpx;
		margin: 0 auto;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
		// position: absolute;
		margin-top: 100rpx;
	}
	.nodata-icon{
		display: block;
		width: 320rpx;
		height: 320rpx;
		margin: 0 auto;
	}
	.nodata-text{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 36rpx;
		text-align: center;
	}
	.tips-content-modal{
		width: 606rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 0 30rpx 50rpx 30rpx;
		.tips-content-title{
			text-align: center;
			padding: 40rpx 0 20rpx 0;
			font-size: 32rpx;
			color:#333333;
			font-weight: 500;
		}
		.tips-item{
			font-size: 28rpx;
			color:#666666;
			line-height: 60rpx;
			letter-spacing: 0rpx;
		}
		.confirm{
			width:400rpx;
			height: 70rpx;
			background: #FF9500;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 600;
			color: #FFFFFF;
			border-radius: 10rpx;
			margin: 50rpx auto 0;
		}
	}
	.return-top {
		width: 96rpx;
		height: 96rpx;
		position: fixed;
		bottom: 280rpx;
		right: 32rpx;
	}
	
	
	/* 时间范围选择 */
	.date-box{
		margin-bottom: 20rpx;
	}
	/deep/.uni-date-x{
		justify-content:flex-start;
		border-radius: 16rpx;
		padding: 0 5rpx 0 10rpx;
		font-size: 26rpx;
	}
	/deep/.uni-date-x--border{
		border-radius: 16rpx;
		border: 1rpx solid #dcdfe6;
	}
	/deep/.uni-date__x-input{
		width: 270rpx;
		font-size: 26rpx;
		padding: 0 5rpx;
	}
	/deep/.uni-datetime-picker--btn{
		background-color: #FFAE32;
	}
	/deep/.uni-calendar-item--multiple .uni-calendar-item--before-checked{
		background-color: #FFB84B;
	}
	/deep/.uni-calendar-item__weeks-box .uni-calendar-item--checked{
		background-color: #FFB84B;
	}
	/deep/.uni-calendar-item--multiple .uni-calendar-item--after-checked{
		background-color: #FFB84B;
	}
	/deep/.uni-calendar-item__weeks-box-text{
		color: #333333;
	}
</style>